<template>
	<view>
		<view @click="handleChild(books.id)" class="bookResources_bottom" v-for="(books) in child" :key="books.id">
			<view class="bookResources_bottom_box">
				<image class="bookResources_bottom_box_img" :src="books.imgurl"></image>
			</view>
			<view class="bookResources_bottom_content">
				<view class="bookResources_bottom_content_top">
					{{books.name}}
				</view>
				<view class="bookResources_bottom_content_bottom">
					{{books.synopsis}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bookResourcesChild",
		props: {
			child: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			handleChild(id){
				this.$emit("handleChild", id)
			}
		},
	}
</script>

<style scoped>
.bookResources_bottom{
	width: 100%;
	height: 330rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #C8C7CC;
	margin-top: 20rpx;
}
.bookResources_bottom_box{
	width: 276rpx;
	height: 276rpx;
	border-radius: 10rpx; 
	overflow: hidden;
}
.bookResources_bottom_box_img{
	width: 100%;
	height: 100%;
}
.bookResources_bottom_content{
	flex: 1;
	height: 100%;
	box-sizing: border-box;
	padding-left: 20rpx;
}
.bookResources_bottom_content_top{
	font-size: 40rpx;
	font-weight: bold;
}
.bookResources_bottom_content_bottom{
	margin-top: 20rpx;
	color: #808080;
}
</style>
